<template>
    <div>
        <table border="1" width="1000px">
            <tr>
                <td>商品名称</td>
                <td>售卖价格</td>
                <!-- 只有公司总监可以看到 -->
                <td v-if="type == 1">进货价格</td>
                <!-- 公司总监或者 销售员可以看到 -->
                <td v-if="type==1 || type==2">进货地址</td>
                <td>所属公司</td>
            </tr>
            <tr v-for="(item,index) in list" :key="index">
                <td>{{item.name}}</td>
                <td>{{item.nowprice}}</td>
                <td v-if="type == 1">{{item.buyPrice}}</td>
                <td v-if="type==1 || type==2">{{item.address}}</td>
                <td>{{item.shop}}</td>
            </tr>
        </table>
    </div>
</template>
<script>
import axios from 'axios'
import {reactive,ref,toRefs,computed} from 'vue'
import {useStore} from 'vuex'
export default {
    setup(props) {
        const {state} = useStore()
        const data = reactive({
            list:[],
            type:computed(()=>state.status)
            
            
        })
        axios.get('tableData.json').then(res=>{
            console.log(res);
            data.list = res.data
        })
        return {...toRefs(data)}
    }
    
}
</script>